<template>
	<view class="withdraw-container">
		<mescroll-uni ref="mescrollRef"
			@up="withdrawDetail" @init="mescrollInit"
			:up="upOption" :down="downOption" @down="downCallback">
			
		<view class="tui-mybg-box">
			<image class="withdraw-bg" src="../../../static/img/loginbg.png" mode="widthFix"></image>
			<view class="withdraw-top">
				<view class="withdraw-balance">￥{{agencyFeeWithdraw?agencyFeeWithdraw:0}}</view>
				<view class="withdraw-explain">可提现金额</view>
				<input v-model="withdrawAmount" class="withdraw-input" type="digit" maxlength="10" min="1"
				placeholder-class="placeholder"
				placeholder="请输入可提现金额" @input="check">
				<view class="withdraw-btn" @tap="withdraw">提现</view>
				<view class="withdraw-detaile" @tap="showRules">提成规则</view>
			</view>
		</view>
		<view class="withdraw-tip">每次提现不低于1元</view>
	<!-- 	<view class="withdraw-record"> -->
			<view class="withdraw-record-title">提现记录</view>
				<view class="withdraw-record-con">
					<view v-for="item in withdrawRecords"
					class="record-item">
						<view class="record-left">
							<view class="record-date">日期：{{item.withdrawDate}}</view>
							<view class="record-status">
								<template v-if="item.withdrawStatus=='0'">申请中</template>
								<template v-else-if="item.withdrawStatus=='10'">审批成功</template>
								<template v-else-if="item.withdrawStatus=='20'">驳回</template>
								<template v-else="item.withdrawStatus=='30'">完成</template>
							</view>
						</view>
						<view class="record-amount">￥{{item.withdrawAmount}}</view>
					</view>
				</view>
		</mescroll-uni>
		<!-- </view> -->
		
		<view class="rules-wrap" :class="rulesFlag?'show':''" @tap="hideRules"></view>
		<view class="rules-con" :class="rulesFlag?'show':''">
			<view class="rules-con-inner">
				<view class="rules-title">提成相关说明</view>
				<view class="rules-row">1、目前显示的提成是已结算的提成（不包括申请中的提成）。</view>
				<view class="rules-row">2、已结算提成：客户购买商品确认收货日起7天内没有出现退货退款的售后问题，对应的提成会在7天（7天无理由退款）后正式到账，到账的提成可以进行消费。</view>
				<view class="rules-row">3、未结算提成：客户购买商品确认收货日起7天内都属于未结算提成。如果7天（7天无理由退款）内提出退货退款的售后问题，其相应的提成会在售后审批结束后进行结算。</view>
			</view>
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiButton from "@/components/button/button"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			tuiButton,
		},
		data() {
			return {
				agencyFeeWithdraw:'',
				withdrawAmount:'',//提现金额
				withdrawRecords:[],//提现记录
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	size: 10 // 每页数据的数量
					},
					noMoreSize: 10, 
				},
				rulesFlag:false,
				height:0,
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options&&options.agencyFeeWithdraw){
				this.agencyFeeWithdraw=options.agencyFeeWithdraw;
			}
			
			uni.getSystemInfo({
				success: (res) => {
					this.height = 750 / uni.upx2px(750)*(res.windowHeight - uni.upx2px(414))
				}
			});
		},
		methods: {
			check(e) {
				//正则表达试
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.withdrawAmount= e.target.value
				})
			},
			withdraw(){
				let stopFunctionArr = this.$store.state.dictDataAll['stopFunction'];
				let stopFunItem1 = null; //当前对象
				let stopFunItem2 = null; //message对象
				let stopFunItemArr = stopFunctionArr.filter((item) => {
					return (item.dictLabel == 'function1' || item.dictLabel == 'message')
				});
				if (stopFunItemArr[0].dictLabel == 'function1') {
					stopFunItem1 = stopFunItemArr[0];
					stopFunItem2 = stopFunItemArr[1];
				} else {
					stopFunItem2 = stopFunItemArr[0];
					stopFunItem1 = stopFunItemArr[1];
				}
				
				if (stopFunItem1.dictValue == '0') { //开启
					let params={
						withdrawAmount:this.withdrawAmount,
						// #ifdef MP-WEIXIN
						deviceFlg:0, //小程序
						// #endif
						// #ifdef APP-PLUS
						deviceFlg:1, //app
						// #endif
					}
					
					if (this.withdrawAmount>this.agencyFeeWithdraw) {
						this.$util.msg('余额不足');
						this.$refs.confirmBtn.stop();
						return;
					}
					if (this.withdrawAmount<1) {
						this.$util.msg('提现金额不能低于1元');
						this.$refs.confirmBtn.stop();
						return;
					}
					// if (!this.$util.checkStr(this.withdrawAmount, 'money')) {
					// 	this.$util.msg('提现金额格式小数点两位');
					// 	this.$refs.confirmBtn.stop();
					// 	return;
					// }
					
					if (!this.$util.checkStr(this.withdrawAmount, 'withdraw')) {
						this.$util.msg('提现金额不正确!');
						this.$refs.confirmBtn.stop();
						return;
					}
					this.$http.withdraw(params).then((res) => {
						if(res.status === 0) {
							uni.showToast({
								title: "提现申请已提交!",
								icon: "none",
								duration: 500
							});
						}
						this.withdrawAmount='';
						this.withdrawDetail({num:1,size:10})
						this.getAgencyFee()
					})
				} else { //关闭
					let titleTips = stopFunItem2.dictValue
					uni.showToast({
						icon: 'none',
						title: titleTips,
						duration: 2000,
					})
				}
				
			},
			withdrawDetail(page){
				const params = {
					current: page.num,
					pageSize: page.size,
				};
				this.$http.withdrawDetail(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						if(curPageData.length>0){
							curPageData.forEach(item=>{
								if(item.withdrawDate&&item.withdrawDate.indexOf(' ')>0){
									item.withdrawDate=item.withdrawDate.split(' ')[0]
								}
							})
						}
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.withdrawRecords= []
						};
						this.withdrawRecords = this.withdrawRecords.concat(curPageData);
						
						
						
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			getAgencyFee() { //获取提成
				this.$http.getAgencyFee().then((res) => {
					if (res.status === 0) {
						// this.agencyFee=res.data.agencyFee;
						this.agencyFeeWithdraw=res.data.agencyFeeWithdraw;
					}
				})
			},
			showRules(){
				this.rulesFlag=true;
			},
			hideRules(){
				this.rulesFlag=false;
			},
			onUnload() {//返回上一页
				this.$util.prePage().getAgencyFee();
			},
		}
	}
</script>

<style lang="scss">
.withdraw-container{
	width: 100%;
	position: relative;
	background-color: #fff;
	height: 100vh;
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	
	
	.tui-mybg-box{
		width:100%;
		height: 340rpx;
		text-align: center;
		overflow: hidden;
		position: relative;
		.withdraw-bg,.withdraw-top{
			width:100%;
			height: 340rpx;
			position: absolute;
			left: 0;
			top:0;
			z-index: 0;
		}
		.withdraw-bg{opacity: 0.9;}
		.withdraw-top{
			z-index: 1;
			
			.withdraw-balance{
				color: #fff;
				font-size: 50rpx;
				line-height: 70rpx;
				margin-top:20rpx;
			}
			.withdraw-explain{
				color: #fff;
				font-size: 28rpx;
				opacity: 0.8;
				line-height: 60rpx;
			}
			.withdraw-input{
				width: 380rpx;
				background-color: #fff;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 12rpx;
				margin:0 auto;
				padding:0 8rpx;
				
			}
			.withdraw-btn{
				width: 88rpx;
				height: 88rpx;
				line-height: 88rpx;
				// background-color: #f8dc32;
				// border-radius: 50%;
				text-align:center;
				color:$red;
				// box-shadow: 0 0 10rpx #f4b406 inset;
				margin:0 auto;
				font-size: 28rpx;
				margin-top:16rpx;
				background:url(../../static/img/tixian.png) no-repeat;
				background-size: 100% 100%;
			}
			.withdraw-detaile{
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				width: 160rpx;
				height: 50rpx;
				font-size: 24rpx;
				line-height: 54rpx;
				color: #fff;
				background:url(../../../static/img/tixian2.png) no-repeat;
				background-size: 100% 100%;
			}
		}
		
	}
	.withdraw-tip{
		width: 100%;
		background-color: #f4f4f4;
		padding:14rpx 30rpx;
		font-size: 20rpx;
		text-align: center;
	}
	// .withdraw-record{
	// 	background-color: #fff;
	// 	font-size: 28rpx;
	// 	height: 100vh;
	// 	padding-top: 340rpx;
	// 	overflow-y: auto;
		.withdraw-record-title{
			line-height: 72rpx;
			border-top: 2rpx solid $borderColor;
			border-bottom: 2rpx solid $borderColor;
			box-shadow: 0 0 6rpx solid #eee;
			padding:0rpx 30rpx;
			z-index: 990;
			position: sticky;
			top: 0;
			background-color: #fff;
		}
		.withdraw-record-con{
			// height: calc(100vh - 414rpx);
			// overflow-y: auto;
			padding:0rpx 30rpx 20rpx;
			
		}
		.mescroll-empty{
			padding-bottom: 220rpx;
		}
		.record-item{
			padding:14rpx 0;
			border-bottom: 2rpx solid $borderColor;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.record-left{
				width: 400rpx;
				line-height: 44rpx;
				.record-date{}
				.record-status{
					color: $red;
				}
			}
			.record-amount{
				font-size: 32rpx;
			}
		}
	// }
	.rules-wrap{
		width: 100%;
		height: 100vh;
		position: fixed;
		left:0;
		top:0;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
		transition: opacity 0.3s ease-in-out;
		z-index: 10;
		&.show{
			display: block;
		}
	}
	.rules-con{
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom:0;
		-webkit-transition:height 0.3s ease-in-out;
		transition: height 0.3s ease-in-out;
		height: 0;
		z-index: 20;
		.rules-con-inner{
			width: 100%;
			padding:30rpx 26rpx 40rpx 30rpx;
		}
		.rules-title{
			font-weight: bold;
			text-align: center;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			line-height: 60rpx;
		}
		.rules-row{
			font-size: 24rpx;
			margin-bottom: 20rpx;
			opacity: 0.8;
			line-height: 42rpx;
		}
		&.show{
			height: 520rpx;
			// padding-bottom:constant(safe-area-inset-bottom);
			// padding-bottom:env(safe-area-inset-bottom);
		}
	}
}
</style>
